import { Card } from "antd"
import { useState } from "react";
import Topology from "./Topology";
import NQL from "./NQL";
import Monitor from "./Monitor";
import Programming from "./Programming";

export default () => {
  const [activeTabKey2, setActiveTabKey2] = useState<string>('topo');

  const tabListNoTitle = [
    {
      key: 'topo',
      label: 'Overview',
    },
    {
      key: 'nql',
      label: 'NQL',
    },
    {
      key: 'monitor',
      label: 'Monitor',
    },
    {
      key: 'programming',
      label: 'Programming',
    },
  ];

  const contentListNoTitle: Record<string, React.ReactNode> = {
    topo: <Topology />,
    nql: <NQL/>,
    monitor: <Card size="small" title="Requirements"><Monitor/></Card>,
    programming: <Programming/>
  };

  const onTab2Change = (key: string) => {
    setActiveTabKey2(key);
  };

  return (
    <Card
      size="small"
        style={{ width: '100%', height: '100%' }}
        tabList={tabListNoTitle}
        activeTabKey={activeTabKey2}
        // tabBarExtraContent={<a href="#">More</a>}
        onTabChange={onTab2Change}
        tabProps={{
          size: 'small',
        }}
      >
        {contentListNoTitle[activeTabKey2]}
      </Card>

  )
}